<template>
	<view class="content">
		<view class="title">
			提现金额
		</view>
		<view class="mony">
			<view class="left">
				<text>￥</text>
				<input class="uni-input" type="number" v-model="abs" placeholder="请输入提现金额" />
			</view>
			<view class="right" @click="allTx">
				全部提现
			</view>
		</view>
		<view class="name display align-items">
			<uni-icons type="weixin" size="20" color="#09BB07" style="margin-right: 15rpx;"></uni-icons>提现到微信
			<view class="used">可用余额{{UserAccount.amount}}元</view>
		</view>
		<view class="sxf">当前提现手续费{{withdrawFee}}</view>
		<view class="btn display justify-content align-items" @click="submitBtnTx">确定</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../../components/isLogin.vue'
	import {
		uniIcons
	} from '@dcloudio/uni-ui'

	export default {
		components: {
			uniIcons,
			isLogin
		},
		data() {
			return {
				isLogin: 1,
				UserAccount: {},
				abs: '',
				withdrawFee:''
			}
		},
		onLoad() {
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				this.getMoneyInfo()
				this.getOpen()
			}
		},

		onPullDownRefresh() {
			uni.showToast({
				icon: 'loading',
				title: '加载中',
			});
			setTimeout(() => {
				this.getMoneyInfo(() => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
				this.getOpen()
			}, 1000)
		},
		methods: {
			// 全部提现、
			allTx() {
				let that = this
				that.abs = that.UserAccount.amount
			},
			// 获取余额
			getMoneyInfo(callback) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.mine.getUserAccount, data).then(res => {
					if (res.code == '200') {
						that.UserAccount = res.data
						callback && callback()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 提现手续费
			getOpen(){
				let that = this
				var data = {
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.distribution.withdrawStatus, data).then(res => {
					if (res.code == '200') {
						this.withdrawFee =  res.data.withdraw_fee
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 提现
			submitBtnTx() {
				let that = this
				var abs = that.abs
				var money = that.UserAccount.amount
				abs = Number(abs)
				money = Number(money)
				if (abs < 1) {
					return uni.showToast({
						title: '最低提现金额为1元',
						icon: "none"
					})
				}
				if (abs - money > 0) {
					return uni.showToast({
						title: '提现金额不能大于所属金额',
						icon: "none"
					})
				}
				var data = {
					openid: uni.getStorageSync('openid'),
					abs: abs,
				}
				this.$myRequest.post(this.$api.distribution.withdraw, data).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: '提现申请已提交',
							icon: "success",
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				this.getMoneyInfo()
				this.getOpen()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.used {
		color: #294D7C;
		font-size: 26rpx;
		// margin-top: 20rpx;
		margin-left: 15rpx;
	}

	.content {
		width: 690rpx;
		margin: 0 auto;

		.title {
			font-size: 28rpx;
			color: #333333;
			padding-left: 10rpx;
			border-left: 5rpx solid #294D7C;
			margin-top: 26rpx;
		}

		.mony {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E5E5E5;

			.left {
				font-size: 36rpx;
				line-height: 114rpx;
				flex: 1;
				display: flex;
				align-items: center;

				.uni-input {
					color: #999999;
					margin-left: 5rpx;
				}
			}

			.right {
				color: #294D7C;
				font-size: 24rpx;
			}
		}

		.name {
			color: #333333;
			font-size: 26rpx;
			margin-top: 19rpx;
		}

		.sxf {
			font-size: 22rpx;
			margin-top: 15rpx;
			color: #999;
		}
	}
</style>
